<!--
 * @Description: file content
 * @Author: ZeT1an
 * @Date: 2022-02-02 15:21:59
 * @LastEditors: ZeT1an
 * @LastEditTime: 2022-02-02 15:25:45
 * @LastEditContent: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div class="counter"></div>
	<button class="increment">+1</button>
	<button class="decrement">-1</button>

	<script>
		const counterEl = document.querySelector('.counter')
		const incrementEl = document.querySelector('.increment')
		const decrementEl = document.querySelector('.decrement')

		let counter = 100
		counterEl.innerHTML = counter

		incrementEl.addEventListener('click', () => {
			counter++
			counterEl.innerHTML = counter
		})
		decrementEl.addEventListener('click', () => {
			counter--
			counterEl.innerHTML = counter
		})
	</script>
</body>

</html>